<template>
  <div>
    <a-tabs :activeKey="activeKey" @change="callback">
      <a-tab-pane :key="1" tab="本店订单"> </a-tab-pane>
      <a-tab-pane :key="2" tab="其他店订单"></a-tab-pane>
    </a-tabs>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1700"
      :hideSelect="true"
      :requestType="true"
      :defaultParams="{
        shopType: activeKey,
        shopperType: shopperType,
      }"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item
            label="订单所属店铺名称"
            v-if="userInfo.shopRoleCode == 'role:store:main' && activeKey == 2"
          >
            <a-input
              style="width: 200px"
              v-decorator="['orderBelongShopName']"
              placeholder="请输入店铺名称"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="订单编号">
            <a-input
              style="width: 200px"
              v-decorator="['orderGoodsNo']"
              placeholder="请输入订单编号"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="订单时间">
            <fast-range-picker
              allowClear
              v-decorator="['queryOrderStartTime-queryOrderEndTime']"
            >
            </fast-range-picker>
          </a-form-item>

          <a-form-item label="订单状态">
            <a-select
              showSearch
              allowClear
              style="width: 150px"
              :options="showStatusList"
              v-decorator="['orderStatus']"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>

          <template
            v-if="
              (userInfo.shopRoleCode == 'role:store:main' && activeKey == 2) ||
              (userInfo.shopRoleCode == 'role:store:branch' && activeKey == 1)
            "
          >
            <a-form-item label="活动来源">
              <a-select
                showSearch
                allowClear
                style="width: 150px"
                :options="activitySourceList"
                v-decorator="['activitySource']"
                placeholder="请选择"
              >
              </a-select>
            </a-form-item>
          </template>

          <a-form-item label="购买活动名称">
            <a-input
              style="width: 200px"
              v-decorator="['goodsName']"
              placeholder="请输入购买活动名称"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="导购名称">
            <a-input
              style="width: 200px"
              v-decorator="['guideName']"
              placeholder="请输入导购名称"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="联系人手机号">
            <a-input
              style="width: 200px"
              v-decorator="['buyerPhone']"
              placeholder="请输入联系人手机号"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="activity:order:export">
          <a-button type="primary" @click="exportExcel">导出订单</a-button>
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <permission authority="activity:order:query">
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="openOrderDetails(record)"
            >详情</a
          >
        </permission>
      </template>
    </search-table>
    <orderDetails
      :visible="detailsVisible"
      @cancel="closeOrderDetailsModal"
      :orderId="orderId"
      :formData="formData"
    ></orderDetails>
  </div>
</template>
<script>
import { mapState } from "vuex";
import orderDetails from "./components/orderDetails.vue";
export default {
  name: "activeOrder",
  components: {
    orderDetails,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
    shopperType() {
      // if (this.userInfo.isHeadMainStore == 1) {
      //   return 4;
      // } else
      if (this.userInfo.shopRoleCode == "role:store:main") {
        if (this.userInfo.userIdType == 1) {
          return 1;
        } else {
          return 4;
        }
      } else if (this.userInfo.shopRoleCode == "role:store:branch") {
        if (this.userInfo.userIdType == 1) {
          return 2;
        } else {
          return 3;
        }
      }
    },
  },
  data() {
    return {
      activeKey: 1,
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "/activity/order/page",
      columns: [
        {
          title: "订单编号",
          dataIndex: "orderGoodsNo",
          key: "orderGoodsNo",
          width: 200,
        },
        {
          title: "购买活动名称",
          dataIndex: "goodsName",
          key: "goodsName",
          width: 120,
        },
        {
          title: "活动来源",
          dataIndex: "activitySource",
          key: "activitySource",
        },
        {
          title: "创建活动店铺名称",
          dataIndex: "shopName",
          key: "shopName",
          width: 180,
        },
        {
          title: "联系人",
          dataIndex: "buyerName",
          key: "buyerName",
        },
        {
          title: "手机号",
          dataIndex: "buyerPhone",
          key: "buyerPhone",
          width: 125,
        },
        {
          title: "订单状态",
          dataIndex: "orderStatus",
          key: "orderStatus",
          align: "center",
          customRender: (text, row) => {
            if (text == "ORDER_CANCEL") {
              text = "已取消";
            } else if (text == "ORDER_UNPAID") {
              text = "待付款";
            } else if (text == "ORDER_LEFT_WAIT") {
              text = "待核销";
            } else if (text == "ORDER_UN_EVALUATE") {
              text = "已核销";
            } else if (text == "ORDER_CLOSE") {
              text = "已退款";
            }
            return text;
          },
        },
        {
          title: "订单时间",
          dataIndex: "createDate",
          key: "createDate",
          width: 180,
        },
        {
          title: "订单金额",
          dataIndex: "orderPrice",
          key: "orderPrice",
          align: "center",
          customRender: (text, row) => {
            return text ? "￥" + (text / 100).toFixed(2) : "";
          },
        },
        {
          title: "订单所属门店",
          dataIndex: "orderBelongShopName",
          key: "orderBelongShopName",
          width: 120,
        },
        {
          title: "导购姓名",
          dataIndex: "guideName",
          key: "guideName",
          align: "center",
        },
        {
          title: "角色类型",
          dataIndex: "guideUserRoleName",
          key: "guideUserRoleName",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      /*订单状态*/
      showStatusList: [
        {
          label: "待付款",
          value: "ORDER_UNPAID",
        },
        {
          label: "待核销",
          value: "ORDER_LEFT_WAIT",
        },
        {
          label: "已核销",
          value: "ORDER_UN_EVALUATE",
        },
        {
          label: "已取消",
          value: "ORDER_CANCEL",
        },
        {
          label: "已退款",
          value: "ORDER_CLOSE",
        },
      ],
      //活动来源
      activitySourceList: [
        {
          label: "总店",
          value: 1,
        },
        {
          label: "分店",
          value: 2,
        },
      ],
      detailsVisible: false,
      formData: {},
      orderId: "",
    };
  },
  methods: {
    callback(key) {
      console.log(key);
      this.activeKey = key;
      this.$refs.searchtable.resetForm();
    },
    //详情弹窗
    openOrderDetails(record) {
      this.detailsVisible = true;
      this.orderId = record.id;
      this.formData = record;
    },
    closeOrderDetailsModal() {
      this.detailsVisible = false;
    },
    //导出
    exportExcel() {
      if (this.$refs.searchtable.dataSource.length == 0) {
        this.$message.warning("页面数据为空无法导出！！");
        return false;
      }
      this.$export(
        "/activity/order/export",
        this.$refs.searchtable.searchParams || {},
        false,
        {},
        true
      );
    },
  },
};
</script>
<style scoped lang="less">
</style>